<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:49:11
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-23 19:32:50
 * @FilePath: /tea-garden-web/src/pages/overview/subject-growth.vue
 * @Description: 专题-长势与水肥
-->
<template>
  <div class="subject-growth">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <span class="module-name">长势与水肥</span>
      <div class="subject-content">
        <!-- <component-subject-button-group
          :buttons="types"
          :active="activeType"
          @change="setActiveType"
        /> -->
        <el-row class="title-area margin-none">
          <el-col :span="12" class="title">长势指数</el-col>
          <el-col :span="12" class="subtitle" v-if="!loading.growthStatistics && growthStatistics.length">
            <!-- {{ growthStatistics[0].datetime || "--" }} -->
            {{formattedTime}}
          </el-col>
        </el-row>
        <div class="info-box-1">
          <section class="info-box-1" v-if="!loading.growthStatistics && growthStatistics.length">
            <section class="status-box"></section>
            <span class="status-label">当前状态</span>
            <span
              class="status-value"
              :style="{ color: colorChange[growthStatistics[0].zspj] }"
            >
              {{ zspj[growthStatistics[0].zspj] || "--" }}
            </span>
            <i
              class="status-icon"
              :class="[`select-status-${growthStatistics[0].zspj ? growthStatistics[0].zspj : 1}`]"
            />
            <i
              class="level-bg"
              :class="[`select-level-${growthStatistics[0].zspj ? growthStatistics[0].zspj : 1}`]"
            ></i>
            <span class="status-value2">
              {{ growthStatistics[0].zspj || "--" }}
            </span>
          </section>
          <section class="info-box-1" v-else v-loading="loading" />
        </div>
        <div>
          <img  style="width: 273px; height: 205px;" src="@/assets/picture/zhangshi.jpg" alt="">
        </div>
        <el-row class="title-area">
         <!--  <el-col :span="12" class="title">趋势变化</el-col> -->
          <el-col :span="24" class="title">茶叶生长周期与叶面积指数</el-col>
        </el-row>
        <lineEcharts style="width: 273px; height: 225px;"></lineEcharts>
<!--         <component-line-chart
          :data="growthTrend"
          :value-range="{ min: 0, max: 4 }"
          v-if="!loading.growthStatistics"
        />
        <section style="width: 273px; height: 225px;" v-else v-loading="loading.growthTrend" /> -->
        <!-- <el-row class="title-area">
          <el-col :span="12" class="title">长势分布</el-col>
        </el-row>
        <component-radial-bar
          :data="growthDistribute"
          v-if="!loading.growthStatistics"
        />
        <section style="width: 137px; height: 130px;" v-else v-loading="loading.growthStatistics" /> -->
      </div>
      <!-- <component-suggestion :methods-type="'getGrowthAdvice'" /> -->
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import lineEcharts from './echarts-comonents/growth-echarts.vue'
import { mapActions, mapMutations, mapState, mapGetters } from 'vuex'
import { colorChange } from '@/util/dict.js'
export default {
  components: {
    lineEcharts
  },
  data () {
    return {
      zspj: {
        4: '长势优越',
        3: '长势良好',
        2: '长势适中',
        1: '长势较差'
      },
      currentTime: dayjs()
    }
  },
  watch: {
    activeType () {
      this.getGrowthStatistics()
      this.getGrowthTrend()
      this.getGrowthDistribute()
      this.getFarmlandGrowth()
    },
    currentFarmlandId () {
      this.getFarmingRecordById()
    }
  },
  computed: {
    ...mapState('base-overview', ['currentFarmlandId']),
    ...mapState('subject-growth', ['loading', 'types', 'activeType', 'growthStatistics', 'growthTrend', 'growthDistribute', 'farmlandGrowth', 'farmingRecord']),
    ...mapGetters('common', ['getDictItemNameById']),
    colorChange () {
      return colorChange
    },
    formattedTime () {
      return this.currentTime.format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    ...mapActions('subject-growth', ['getGrowthStatistics', 'getGrowthTrend', 'getGrowthDistribute', 'getFarmlandGrowth', 'getFarmingRecordById']),
    ...mapMutations('subject-growth', ['setActiveType']),
    updateCurrentTime () {
      this.currentTime = dayjs()
    }
  },
  created () {
    this.getGrowthStatistics()
    this.getGrowthTrend()
    this.getGrowthDistribute()
    this.getFarmlandGrowth()
    this.updateCurrentTime()
    setInterval(this.updateCurrentTime, 1000)
  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-growth {
  width: 308px;
  height: 780px;
    margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
    .subject-content {
      .title-area {
        height: 23px;
        line-height: 23px;
        margin-bottom: 20px;
        margin-top: 28px;
        .title {
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
          text-align: center;

        }
        .subtitle {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #888c96;
          /* text-align: right; */
        }
      }
      .info-box-1 {
        height: 84px;
        position: relative;
        margin-bottom: 30px;
        .status-box {
          width: 133px;
          height: 84px;
          background: #ffffff;
          box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
          border-radius: 5px 5px 5px 5px;
        }
        .status-label {
          font-size: 12px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #888c96;
          position: absolute;
          left: 14px;
          top: 18px;
        }
        .status-value {
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #369afe;
          position: absolute;
          left: 14px;
          top: 45px;
        }
        .status-icon {
          width: 21.5px;
          height: 21.5px;
          position: absolute;
          left: 88px;
          top: 45px;
        }
        .level-bg {
          position: absolute;
          right: 13px;
          bottom: -11px;
          width: 100px;
          height: 100px;
        }
        .status-value2 {
          font-size: 20px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #089bab;
          position: absolute;
          left: 203px;
          top: 41.5px;
          &::after {
            content: "级";
            font-size: 10px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #8a94a6;
            display: block;
          }
        }
      }
    }
  }
}
.margin-none {
  margin-top: 0 !important
}
</style>
